<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>interact</title>
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol-debug.js"></script>
	</head>

	<body onload="init()">
		<div id="map" class="row-fluid col-lg-10">
		</div>
		<div id="operate" class="row-fluid col-lg-10">
			<select id="drawtype">
				<option value="None">None</option>
				<option value="Point">点</option>
				<option value="LineString">线</option>
				<option value="Polygon">面</option>
			</select>
		</div>

		<script type="text/javascript">
			var draw; //定义全局变量，当绘图方式改变时删除当前的绘制工具  
			function init() { //程序初始化  
				//新建底图-瓦片图层  
				var raster = new ol.layer.Tile({
					source: new ol.source.MapQuest({
						layer: 'sat'
					})
				});
				//临时图层的数据源  
				var source = new ol.source.Vector();
				//新建临时图层，并设置临时图层渲染各种要素的样式  
				var vector = new ol.layer.Vector({
					source: source,
					//对交互图形的处理
					style: new ol.style.Style({
						//面
						fill: new ol.style.Fill({
							color: 'rgba(255,255,255,0.2)'
						}),
						//线
						stroke: new ol.style.Stroke({
							color: '#ffcc33',
							width: 2
						}),
						//点
						image: new ol.style.Circle({
								radius: 7,
								fill: new ol.style.Fill({
									color: '#ffcc33'
								})
							})
							/*,
													text: new ol.style.Text({
														font: '12px Calibri,sans-serif',
														fill: new ol.style.Fill({
															color: '#000'
														}),
														stroke: new ol.style.Stroke({
															color: '#fff',
															width: 3
														}),
														text: 'aa'
													})*/
					})
				});
				//新建地图  
				var map = new ol.Map({
					layers: [raster, vector],
					target: 'map',
					view: new ol.View({
						center: [-11000000, 4600000],
						zoom: 4
					})
				});
				map.on("click", function(evt) {
					if (typeSelected.value != 'LineString') {
						return;
					}
					//获得坐标
					var coord = evt.coordinate;
					//画圆形
					var circle = new ol.Feature(new ol.geom.Point(coord));
					circle.setStyle(new ol.style.Style({
						image: new ol.style.Circle({
							radius: 5,
							stroke: new ol.style.Stroke({
								color: 'red',
								width: 2
							})
						})
					}));
					source.addFeature(circle);
				});
				var typeSelected = document.getElementById('drawtype');
				//初始化绘图工具  
				function addInteraction() {
						var value = typeSelected.value;
						if (value !== 'None') {
							draw = new ol.interaction.Draw({
								source: source, //设置要素源，绘制结束后将绘制的要素添加到临时图层  
								type: (value) //绘制的类型  
							});
							map.addInteraction(draw);
						}
					}
					//绘制方式改变后重新初始化绘图工具  
				typeSelected.onchange = function(e) {
					map.removeInteraction(draw);
					addInteraction();
				};
			}
		</script>
	</body>

</html>